/*
 * @Author: jiu yin
 * @Date: 2023-12-08 17:00:57
 * @LastEditTime: 2024-08-19 16:24:18
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\test\index.tsx
 * jiu
 */
import { useEffect, useState,useRef } from "react";
import "./index.scss";
import FormTwo from "@/comment/FormTwo";
import { setFormList_fn } from "@/comment/FormTwo/utils";

import dayjs from "dayjs";
import { getSuffix } from "@/utils";
import { message, Upload, Button } from "antd";
import Upload_style from "@/comment/upload_style";

function Test() {
   const FormTwo_ref1 = useRef(null);


   // layout或者style 配置项
   // layout或者style 配置项
   let [formTwoProps, setFormTwoProps] = useState({
      formItemLayout: {
         labelCol: {
            span: 10
         }
      },
      layout: "vertical",
      style: { maxWidth: "500px" },
      isButton: false
   } as any);

   //初始data
   let dataFormRoleInfo = {
      input: "",
      checkbox: [],
      radio: 0,
      switch: false,
      datePicker: dayjs("2021-01-01")
   };
   let [formData, setFormData] = useState(dataFormRoleInfo);

   const onFinish = (values: any) => {
      console.log("表单", values);
   };
   //取消
   const cancel = () => {
      console.log("取消");
   };
   //模拟异步请求
   let asyncSetData = (str?: string) => {
      return new Promise((resolve, reject) => {
         setTimeout(() => {
            let arr = [
               { label: "我是请求的", value: 1 },
               { label: "我听说请求啊", value: 2 },
               { label: "杀气结果", value: 3 }
            ];
            if (str) {
               resolve(arr.filter((item: any) => item.label.includes(str)));
            } else {
               resolve(arr);
            }
         }, 1000);
      });
   };

   let [formList, setFormList] = useState([
      {
         type: "div",
         label: "div元素",
         name: "div",
         validateStatus: "warning",
         children: <span className="red">尼玛</span>
      },
      {
         type: "nest_item",
         label: "嵌套",
         name: "nest_item",
         validateStatus: "warning",
         wrapClassName: "nest_item",
         children: [
            {
               type: "textArea",
               label: "",
               name: "textArea222222",
               style: { width: "200px" },
               validateStatus: "warning"
            },
            {
               type: "input",
               label: "",
               name: "input22222",
               style: { marginLeft: "100px", width: "200px" },
               validateStatus: "warning"
            }
         ]
      },

      {
         type: "input",
         label: "input框",
         name: "input",
         placeholder: "请输入",
         onChange: (e: any) => {
            console.log("input框", e);
         }

         // rules:[{ required: true, message: "请输入媒体类型!" }]
         // validateStatus:"success",
      },
      {
         type: "inputPassword",
         label: "inputPassword框",
         name: "inputPassword",
         placeholder: "请输入",
         onChange: (e: any) => {
            console.log("inputPassword框", e);
         },
         rules: [
            { required: true, message: "请重复密码!" },
            (data: any) => ({
               validator(_: any, value: string) {
                  if (data.getFieldValue("password") != value) {
                     return Promise.reject(new Error("请输入相同密码"));
                  }
                  return Promise.resolve();
               }
            })
         ]
      },
      {
         type: "inputNumber",
         label: "inputNumber框",
         name: "inputNumber",
         placeholder: "请输入",
         style: { width: "100%" },
         prefix: "￥",
         controls: false,
         precision: 2,
         onChange: (e: any) => {
            console.log("inputNumber框", e);
         }
         // rules:[{ required: true, message: "请输入媒体类型!" }]
         // validateStatus:"success",
      },
      {
         type: "select",
         label: "select框",
         name: "select",
         placeholder: "请输入",
         required: true,
         showSearch: true,
         // mode:"multiple",
         options: [
            { label: "addadasd", value: 1 },
            { label: "我听说", value: 2 },
            { label: "杀气结果", value: 3 }
         ],
         optionsAsync: asyncSetData,
         request_data: "data.data",//反回的取值
         params:{limit: 10, pages: 1},//请求传参
         onChange: (e: any) => {
            console.log("select", e);
            //演示隐藏
            if (e == 1) {
               setFormList_fn(setFormList, "input", { hidden: true });
            } else {
               setFormList_fn(setFormList, "input", { hidden: false });
            }
         },
         onSearch: (e: any) => {
            console.log("select onSearch", e);
            asyncSetData(e).then((res: any) => {
               setFormList_fn(setFormList, "select", { options: res });
            });
         }
      },
      {
         type: "textArea",
         label: "textArea框",
         name: "textArea",
         placeholder: "请输入尼玛币"
         // rules:[{ required: true, message: "请输入尼玛币!" }]
      },

      {
         type: "checkbox",
         label: "",
         name: "text",
         rules: [
            {
               validator: (_: any, value: boolean) => {
                  return value ? Promise.resolve() : Promise.reject(new Error("Should accept agreement"));
               }
            }
         ],
         onChange: (e: any) => {
            console.log("inputPassword框", e);
         },
         checkboxText: (
            <div>
               阅读并同意<a>《使用协议》</a>
            </div>
         )
      },
      {
         type: "checkboxGroup",
         label: "checkboxGroup框",
         name: "checkboxGroup",
         options: [
            { label: "你说的是什么", value: 1 },
            { label: "我听说", value: 2 },
            { label: "杀气结果", value: 3 }
         ],
         onChange: (e: any) => {
            console.log("checkboxGroup", e);
         }

         // rules:[{ required: true, message: "请输入尼玛币!" }]
      },
      {
         type: "radio",
         label: "radio框",
         name: "radio",
         options: [
            { label: "你说的是什么", value: 1 },
            { label: "我听说", value: 2 },
            { label: "杀气结果", value: 3 }
         ],
         onChange: (e: any) => {
            console.log("radio", e);
         }
         // rules:[{ required: true, message: "请输入尼玛币!" }]
      },
      {
         type: "switch",
         label: "switch框",
         name: "switch",
         onChange: (e: any) => {
            console.log("switch", e);
         }
      },
      {
         type: "image",
         label: "image框",
         name: "image",
         src: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
      },
      {
         type: "datePicker",
         label: "datePicker时间",
         name: "datePicker",
         onChange: (e: any) => {
            console.log("datePicker", e);
         }
      },
      {
         type: "rangePicker",
         label: "rangePicker时间范围",
         name: "rangePicker",
         showTime: true,
         disabledDate: (current: any) => {
            return current && current < dayjs().endOf("day");
         },
         disabled: false,
         onChange: (e: any) => {
            console.log("rangePicker", e);
         }
      },
      {
         type: "upload_card",
         label: "上传照片墙",
         name: "upload_card",
         listType: "picture-card",
         action_url: "/api/v1/media/upload_resource",
         fileList: [
            {
               url: "https://img2.baidu.com/it/u=1713796643,4188877777&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
            }
         ],
         count: 1,
         data: { resource_type: "1" },
         className: "upload_card",
         uploadButton: <div>阿达撒</div>
      },
      {
         type: "upload_card",
         label: "上传照片墙样式",
         name: "upload_card1111111",
         listType: "picture-card",
         action_url: "/api/v1/media/upload_resource",
         count: 1,
         className: "upload_card",
         uploadButton: <Upload_style />
      },
      {
         type: "upload_card",
         label: "上传照片墙",
         name: "upload",
         listType: "picture",
         action_url: "/api/v1/media/upload_resource",
         count: 1,
         className: "upload_card",
         fileSize: 10,
         accept: ".jpg,.jpeg,.png,.svg",
         uploadButton: <button>阿达撒</button>,
         onRemove: e => {
            // @ts-ignore
            //   FormTwo_ref1?.current?.form?.setFieldValue("cover_url", "");
         },
         beforeUpload_fn: (file: any) => {
            //多余逻辑 比如生成canvas 等 返回 true 和false
            let isFormat = true;

            return isFormat;
         }
      },
      {
         type: "button",
         children: (
            <div className="login_but">
               <Button type="primary" htmlType="submit" className="login_but">
                  登录
               </Button>
            </div>
         )
      }
   ]);

   return (
      <div className="warp">
         <FormTwo
            ref={FormTwo_ref1}
            formList={[formList, setFormList]}
            onFinish={onFinish}
            cancel={cancel}
            formTwoProps={formTwoProps}
            formData={[formData, setFormData, dataFormRoleInfo]}
         ></FormTwo>
      </div>
   );
}
export default Test;
